<template>
  <div class="date-wrap">
    <div class="date-header">
      <div class="a-t-l" @click="_switchC">{{switchT}}</div>
      <i class="iconfont icon-shanggeyue month-arrow" @click="monthChange(true)" v-if="switchC"></i>
      <span class="y-m" v-if="switchC">{{headerYear}}年{{headerMonth}}月</span>
      <span class="y-m" v-if="!switchC">{{new Date().getFullYear()}}年{{new Date().getMonth() + 1}}月</span>
      <i class="iconfont icon-xiageyue month-arrow" @click="monthChange(false)" v-if="switchC"></i>
      <router-link :to="{ name: 'menu'}">
        <div class="a-t-r">更多</div>
      </router-link>
    </div>
    <div v-for="(item,i) in weekList" class="date-week" :key="i">
      {{item}}
    </div>
    <div class="a-c-wrap" :class="oa">
      <div v-for="(item,i) in dList" class="date-day" :key="i">
        <span :class="item.className" v-if="!item.isToday"> {{item.showDate}}</span>
        <i class="iconfont icon-jintian isToday" v-else></i>
      </div>
    </div>
  </div>
</template>

<script type="es6">
  import {mapGetters, mapActions, mapState, mapMutations} from 'vuex'
  import {dateInfo} from "../../js/date"
  const openCalendar = ["animated", "openA"];
  const closeCalendar = ["animated", "openL"];
  export default {
    name: 'date',
    data() {
      return {
        oa: [],
        dList: [],
        switchC: true,
        switchT: "收起",
        headerYear: new Date().getFullYear(),
        headerMonth: new Date().getMonth() + 1,
        weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      }
    },
    methods: {
      ...mapActions([
        '_dateList',
      ]),
      ...mapMutations([
        'titleM',
      ]),
      _switchC(){
        this.switchC = !this.switchC;
        if (this.switchC) {
          this.switchT = "收起";
          this.dList = this.dateList;
          this.oa = openCalendar;
        } else {
          this.switchT = "展开";
          this.oa = closeCalendar;
          setTimeout(() => {
            this.dList = this.thisWeekList;
          }, 300)
        }
      },
      monthChange(f) {
        this.headerMonth = f ? this.headerMonth - 1 : this.headerMonth + 1;
        if (this.headerMonth < 1) {
          this.headerMonth = 12;
          this.headerYear = this.headerYear - 1;
        }
        if (this.headerMonth > 12) {
          this.headerMonth = 1;
          this.headerYear = this.headerYear + 1;
        }
        let d = dateInfo.getMonthData(this.headerYear, this.headerMonth);
        this._dateList(d);
        this.dList = this.dateList;
      }
    },
    computed: {
      ...mapGetters([
        'title',
        'dateList',
      ]),
      ...mapState([
        'thisWeekList',
      ]),
    },
    mounted(){
      this.dList = this.dateList;
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../css/mixin";
  @import "../../css/animate";

  .date-wrap {
    background-color: #fff;

    .month-arrow {
      padding: 4px 8px;
      font-size: 16px;
    }
    .y-m {
      margin: 0 22px;
    }

    .date-day {
      box-sizing: border-box;
      padding: 4px;
      width: 14.285714%;
      display: inline-block;
      text-align: center;
      font-size: 15px;
    }

    .date-week {
      @extend .date-day;
      font-size: 12px;
      color: #8f8f8f;
    }

    $height: 40px;

    .date-header {
      font-size: 14px;
      height: $height;
      line-height: $height;
      text-align: center;
      position: relative;
      color: #8f8f8f;
      @include bord_bottom(0)
    }

    @mixin a_t {
      position: absolute;
      top: 0;
      font-size: 14px;
      color: #8f8f8f;
      @include enlarge(1.4);
    }
    .a-t-l {
      @include a_t;
      left: 10px;
    }
    .a-t-r {
      @include a_t;
      right: 10px;
    }

    .not-thisMonth {
      color: #bfbfbf;
    }

    .isToday {
      color: #ff7652;
      font-size: 22px;
      font-weight: 700;
    }

  }

  $oh: 172px;
  $ch: 32px;

  .a-c-wrap {
    height: $oh;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  @-webkit-keyframes openA {
    0% {
      height: $ch;
    }
    100% {
      height: $oh;
    }
  }

  @keyframes openA {
    0% {
      height: $ch;
    }
    100% {
      height: $oh;
    }
  }

  .openA {
    -webkit-animation-name: openA;
    animation-name: openA
  }

  @-webkit-keyframes openL {
    0% {
      height: $oh;
    }
    100% {
      height: $ch;
    }
  }

  @keyframes openL {
    0% {
      height: $oh;
    }
    100% {
      height: $ch;
    }
  }

  .openL {
    -webkit-animation-name: openL;
    animation-name: openL
  }

</style>
